<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE>首页</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="${request.contextPath}/static/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
  
	<style type="text/css">
		.ztree{margin: 50px; }
		.ztree li a.level0 {width:200px;height: 20px; text-align: left; display:block; background-color: #ffffff; border:0px silver solid;}
		.ztree li a.level0.cur {background-color: #66A3D2; }
		.ztree li a.level0 span {display: block; color: #696868; padding-top:3px;font-weight: bold;word-spacing: 2px;}
		.ztree li a.level0 span.button {	float:right; margin-left: 10px; visibility: visible;display:none;}
		.ztree li span.button.switch.level0 {display:none;}
	</style>
  
  <style>
	
	html{
	height:100%;
	}
	body{
		margin:0;
		height:100%;
		overflow:hidden;
	}
	.c-Left{
		width:200px;
		float:left;
		height:100%;
		overflow:hidden;
	}
	.c-Right{
		margin-left:210px;
		height:100%;
	}
	.c-Right iframe{
		width:100%;
		height:100%;
	}
	
  </style>
<script type="text/javascript" src="${request.contextPath}/static/js/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/zTree_v3/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${request.contextPath}/static/js/zTree_v3/jquery.ztree.excheck.js"></script>
  <SCRIPT type="text/javascript" >
	 var setting = {
	    		view: {
	    	        showLine : false,                  //是否显示节点间的连线  
	    	        dblClickExpand : true,             //双击是否关闭
	    	        showIcon: false,                   //是否显示图标
	    	        showLine: false				   //是否显示连接线
	    		},
				async: {
					enable: true,                      //异步加载开启
					url:"${request.contextPath}/ztree",
					otherParam:{"otherParam":"zTreeAsyncTest"},
					dataFilter: filter
				},
				data: {
					simpleData: {
						enable:true,
						idKey: "id",
						pIdKey: "pId"
					}
				},
				callback: {
					beforeExpand: beforeExpand,        //1折叠上次参数
					onExpand: onExpand,				   //2折叠上次参数
					beforeClick: beforeClick,
					onClick: onClick,
					beforeCollapse: zTreeBeforeCollapse
				}
			};
	 
			function zTreeBeforeCollapse(treeId, treeNode) {
					console.log("折叠操作");
				    return true;
			};
			function filter(treeId, parentNode, childNodes) {
				if (!childNodes) return null;
				for (var i=0, l=childNodes.length; i<l; i++) {
					childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
				}
				return childNodes;
			}

			$(document).ready(function(){
				//初始化树
				$.fn.zTree.init($("#tree"), setting);
			});	
			
			var curExpandNode = null;
			function beforeExpand(treeId, treeNode) {
				var pNode = curExpandNode ? curExpandNode.getParentNode():null;
				var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
				var zTree = $.fn.zTree.getZTreeObj("tree");
				for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
					if (treeNode !== treeNodeP.children[i]) {
						zTree.expandNode(treeNodeP.children[i], false);
					}
				}
				while (pNode) {
					if (pNode === treeNode) {
						break;
					}
					pNode = pNode.getParentNode();
				}
				if (!pNode) {
					singlePath(treeNode);
				}

			}
			function singlePath(newNode) {
				if (newNode === curExpandNode) return;

	            var zTree = $.fn.zTree.getZTreeObj("tree"),
	                    rootNodes, tmpRoot, tmpTId, i, j, n;

	            if (!curExpandNode) {
	                tmpRoot = newNode;
	                while (tmpRoot) {
	                    tmpTId = tmpRoot.tId;
	                    tmpRoot = tmpRoot.getParentNode();
	                }
	                rootNodes = zTree.getNodes();
	                for (i=0, j=rootNodes.length; i<j; i++) {
	                    n = rootNodes[i];
	                    if (n.tId != tmpTId) {
	                        zTree.expandNode(n, false);
	                    }
	                }
	            } else if (curExpandNode && curExpandNode.open) {
					if (newNode.parentTId === curExpandNode.parentTId) {
						zTree.expandNode(curExpandNode, false);
					} else {
						var newParents = [];
						while (newNode) {
							newNode = newNode.getParentNode();
							if (newNode === curExpandNode) {
								newParents = null;
								break;
							} else if (newNode) {
								newParents.push(newNode);
							}
						}
						if (newParents!=null) {
							var oldNode = curExpandNode;
							var oldParents = [];
							while (oldNode) {
								oldNode = oldNode.getParentNode();
								if (oldNode) {
									oldParents.push(oldNode);
								}
							}
							if (newParents.length>0) {
								zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
							} else {
								zTree.expandNode(oldParents[oldParents.length-1], false);
							}
						}
					}
				}
				curExpandNode = newNode;
			}

			function onExpand(event, treeId, treeNode) {
				curExpandNode = treeNode;
			}
			
			//点击菜单之前事件
			function beforeClick(treeId, node, clickFlag) {
				console.log("点击之前");
			}
			function onClick(event, treeId, treeNode, clickFlag) {
				//单机展开
				var zTree = $.fn.zTree.getZTreeObj("tree");
				zTree.expandNode(treeNode, null, null, null, true);
				
				//点击给iframe重新赋值src
				var iframe=$("#testIframe");
				iframe.attr("src",treeNode.file);
			}
  </SCRIPT>
 </HEAD>

<BODY>

<div class="c-Left">
	<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</div>
<div class="c-Right">
	<iframe id="testIframe" src="http://www.baidu.com" frameborder="no" seamless></iframe>
</div>

</BODY>
</HTML>
